JS - array - reduce method

En wat als je de waarden in een array op een of andere manier wilt combineren?

Bronnen

Una Kravets, An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods, Mar 26, 2019
Vicky Lay, Understanding Array.prototype.reduce() and recursion using apple pie, May 18, 2017
M. David Green, Using Map and Reduce in Functional JavaScript, March 28, 2016

Beschrijving

De reduce methode herleidt de array naar één enkele waarde.
De reduce methode voert de ingevoerde functie uit voor elk element in de array, van links naar rechts. Wil je het zelfde doen, maar dan van rechts naar links, gebruik je de reduceRight methode.
De geretourneerde waarde van deze functie wordt in een accumulator (result/total) opgeslagen.
Opmerking: de reduce moethode wordt niet uitgevoerd op elementen in de array zonder waarde.

Syntax

array.reduce(function(total,currentValue,currentIndex,arr),initialValue)

Parameter waarden

Parameter

Beschrijving

function(total,currentValue, index,arr)

verplicht. een functie die uitgevoerd wordt op elk element in de array.
functie argumenten:

Argument	Omschrijving
total	verplicht. De initialValue, of de waarde geretourneerd door de functie
currentValue	verplicht: de waarde van het lopende element
currentIndex	optioneel: de array index van het lopende element
arr	optioneel: de array waartoe het lopende element behoort

initialValue

optioneel. de beginwaarde die je aan de functie kan meegeven

reduce respecteert de "niet muteren" en "geen neveneffechten veroorzaken" regels. Het maakt niet uit wat voor soort waarde er in de array staan, het kan gaan om het optellen van een getal, het aaneenschakelen van een string, het samenstellen van een object, enz.

reduce retourneert alleen de 'totale waarde' , en die kan je niet chainen.

Toepassen

De faculteit berekenen wordt meestal gebruikt in een inleiding tot recursief programmeren. We vertrekken van de niet-recursieve implementatie ervan:

function factorial(n) {
  var f = 1;
  for (var c = 1; c < = n; ++c)
  {
     f *= c;
  }
  return f;
}

We kunnen dat vervangen door een functionele aanpak:

function factorial(n) {
  return Array.apply(0, Array(n)).reduce(function(x, y, z) { return x + x * z; }, 1);
}

Hier volgt d ECMAScript 6 versie met een pijl functie:

function factorial(n) {
  return Array.apply(0, Array(n)).reduce((x, y, z) => x + x * z, 1);
}

Voorbeelden

In een latere les hebben we een functie nodig om een literal array om te zetten naar een querystring. Met de reduce methode is dat eenvoudig:
M. David Green, Using Map and Reduce in Functional JavaScript, March 28, 2016

2019-03-30 16:34:48